<template>
  <div>
    <div v-if="showLogin"> 
      <LoginWindow @changeShow="getModel(arguments)"></LoginWindow>
    </div>
    <div class="show">
      <div class="mark-text">当前分数</div>
      <div class="mark">{{mark}}</div>
    </div>
    <div class="row">
      <div class="button left" @click="addMark(1)">+1</div>
      <div class="button right" @click="addMark(-1)">-1</div>
    </div>
    <div class="row">
      <div class="button left" @click="addMark(5)">+5</div>
      <div class="button right" @click="addMark(-5)">-5</div>
    </div>
  </div>
</template>

<script>
import LoginWindow from '@/components/LoginWindow.vue'
import {showModel, post} from '@/util'
export default {
  data () {
    return {
      mark: 0,
      userInfo: {},
      showLogin: false
    }
  },
  components: {
    LoginWindow
  },
  mounted () {
    const userInfoStorage = wx.getStorageSync('userInfo')
    if (userInfoStorage.openId) {
      this.userInfo = userInfoStorage
      this.addMark(0)
    } else {
      // 没有登陆则隐藏底部导航栏
      wx.hideTabBar()
      this.showLogin = true
    }
  },
  onPullDownRefresh: function () {
    console.log('我正在下拉刷新')
    this.addMark(0)
    wx.stopPullDownRefresh()
  },
  onShareAppMessage () {
    return {
      title: '我的小程序',
      path: '/pages/index/'
    }
  },
  methods: {
    async addMark (add) {
      try {
        const data = {
          openid: this.userInfo.openId,
          add: add
        }
        const res = await post('/weapp/createrecord', data)
        this.mark = res.mark
      } catch (error) {
        showModel('请求失败', '请重新尝试哦~')
        console.log('从后端返回的错误信息是：', error)
      }
    },
    getModel (val) {
      this.showLogin = val[0]
      this.userInfo = val[1]
      this.addMark(0)
    }
  }
}
</script>

<style scoped lang="scss">
.show{
  text-align: center;
  height: 266px;
  background: #EA5149;
  margin-bottom: 5px;
  color: #ffffff;
  font-weight: bold;
  .mark-text{
    font-size: 20px;
    padding: 28px;
  }
  .mark{
    font-size: 88px;
  }
}
.row{
  margin: 40px 56px;
  display: flex;
  justify-content: space-around;
  .button{
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 20%;
    border: none;
    text-align: center;
    font-size: 25px;
    color: #ffffff;
    font-weight: bold;
  }
}
.left{
  background: #feb600;
  margin-right: 80px;
}
.right{
  background: #EA5149;
}
</style>

